<template>
  <a-layout>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" class="text-center" :data="tableDate" style="width: 100%;">
        <el-table-column fixed prop="userid" sortable label="用户ID" width="150"></el-table-column>
        <el-table-column prop="username" label="姓名" width="120"></el-table-column>
        <el-table-column prop="usertype" sortable label="用户类型" width="120">
          <template slot-scope="scope">{{scope.row.usertype === 'Tourist'?"未审核":scope.row.usertype}}</template>
        </el-table-column>
        <el-table-column prop="phonenum" sortable label="手机号码" width="120"></el-table-column>
        <el-table-column prop="address" label="地区">
          <template slot-scope="scope">
            <span v-text="Object.values(scope.row.address?scope.row.address:{})"></span>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" sortable label="最近登陆" width="210">
          <template slot-scope="scope">
            <span v-text="new Date(scope.row.lastlogintime).toLocaleString()"></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220" show-overflow-tooltip>
          <template slot="header">
            <input class="el-input__inner" v-model.lazy="search" placeholder="请输入内容" />
          </template>
          <template slot-scope="scope">
            <router-link
              :to="{ name:'查看用户', params: { userid: scope.row.userid } }"
              class="btn btn-info"
            >查看</router-link>&nbsp;
            <el-button type="danger" @click="deldata({uid:scope.row.userid})" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncdeleteUserByID } from "../../../plugins/api.js";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";

export default {
  components: {
    adminContentFooter
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibless: false,
      search: "",
      currentPage: 1,
      pagesize: 20
    };
  },
  props: ["userid"],
  computed: {
    ...mapGetters(["getUser", "getCourse", "getCatebag", "getCoursecatebag"]),
    groupdata() {
      return this.getCoursecatebag.map(({ ID, cid, catebagid }) => {
        return { ID, groupid: catebagid, childid: cid };
      });
    },
    tableDate() {
      const { currentPage, pagesize, data } = this;
      return data.slice((currentPage - 1) * pagesize, currentPage * pagesize);
    },
    data() {
      const { user, search } = this;
      return user.filter(data => {
        const arr = JSON.stringify(Object.values(data));
        return !search || arr.toLowerCase().includes(search.toLowerCase());
      });
    },
    user() {
      const { getUser, userid } = this;
      return getUser.filter(data => data.agent == userid);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async addck() {},
    async addcourse() {}
  },
  async deldata(i) {
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(async () => {
        try {
          await asyncdeleteUserByID(i);
          this.$store.dispatch("actionUser");
          this.$message({
            message: "恭喜你，删除成功",
            type: "success"
          });
        } catch (err) {
          this.$message.error("错了哦，删除失败:" + err);
        }
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
  }
};
</script>

<style scoped>
.tablebox {
  overflow: scroll;
  height: 550px;
}
.table {
  text-align: center;
}
</style>
